<template>
  <div>
    <van-button round block type="primary" @click="deployContainer">部署容器</van-button>
    <van-button round block type="info" @click="backupCompose">备份配置文件</van-button>
    <van-button round block type="info" @click="viewLogs">查看日志</van-button>
    <pre v-if="logs">{{ logs }}</pre>
  </div>
</template>

<script>
import api from '../api';
import { showSuccessToast, showFailToast } from 'vant';

export default {
  name: 'DeployContainer',
  data() {
    return {
      logs: ''
    };
  },
  methods: {
    async deployContainer() {
      try {
        const response = await api.post('/api/deploy-container'); // 添加前面的 '/'
        showSuccessToast("部署成功");
      } catch (error) {
        showFailToast('Failed to deploy container');
      }
    },
    async backupCompose() {
      try {
        const response = await api.post('/api/backup-compose'); // 添加前面的 '/'
        showSuccessToast(response.data);
      } catch (error) {
        showFailToast('Failed to backup docker-compose.yml');
      }
    },
    async viewLogs() {
      try {
        const response = await api.get('/api/view-logs'); // 添加前面的 '/'
        this.logs = response.data.logs;
      } catch (error) {
        showFailToast('Failed to load logs');
      }
    }
  }
};
</script>

<style scoped>
/* Add your styles here */
</style>
